
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./cesium/Cesium1.98/Cesium.js"></script>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <script type="text/javascript">

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {});

        // Cesium地形
        viewer.terrainProvider = Cesium.createWorldTerrain({
            requestWaterMask: true, // 请求水体效果所需要的海岸线数据
            requestVertexNormals: true// 请求地形照明数据
        });
        // 深度监测
        viewer.scene.globe.depthTestAgainstTerrain = true;


        // 贴地
        var hello = viewer.entities.add({
            name: 'hello world',
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([-77, 35, -80, 35, -90, 45]),
                width: 3,
                material: Cesium.Color.RED,
                clampToGround: true,//贴地画线
            }
        });

        // 不贴地
        var world = viewer.entities.add({
            name: 'hello world',
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([-77, 30, -80, 30, -90, 40]),
                width: 3,
                material: Cesium.Color.BLUE,
                clampToGround: false,
            }
        });

        // 不贴地2
        var start = Cesium.Cartesian3.fromDegrees(-57, 30, 2800.0);
        var end = Cesium.Cartesian3.fromDegrees(-70, 40, 300000.0);

        var world = viewer.entities.add({
            name: 'hello world',
            polyline: {
                positions: [start, end],
                width: 3,
                material: Cesium.Color.BLUE,
                clampToGround: false,
            }
        });

    </script>
</body>

</html>